<template>
  <div class="table-comp">
    <el-table
      :data="props.tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="showSelection"
        fixed
        type="selection"
        width="55"
        align="center"
      />
      <template
        v-for="(item, index) of props.tableCols"
        :key="index"
      >
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <template v-if="item.children && item.children.length > 0">
              <el-button
                v-for="(btn, idx) of item.children"
                :key="idx"
                :size="btn.size"
                :type="btn.type"
                @click="btnClick(scope, btn.click)"
              >
                <i
                  v-if="btn.icon"
                  :class="['iconfont', btn.icon]"
                ></i>
                {{ btn.label }}
              </el-button>
            </template>
            <template v-else-if="item.render">
              <div v-html="getRender(scope, item.render)"></div>
            </template>
            <template v-else>
              <span>{{ scope.row[item.prop] }}</span>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div style="margin-top: 1em">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pageIndex"
        :page-size="pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import TableColumnModel from '@/model/TableColumnModel'
import { ref, useSlots, computed, PropType } from 'vue'
const pageIndex = ref(1)
const pageSize = ref(10)

const props = defineProps({
  showSelection: {
    type: Boolean,
    default: true,
  },
  tableCols: {
    type: Array as PropType<Array<TableColumnModel>>,
    required: true,
    default: (): Array<TableColumnModel> => [],
    validator: function (value: Array<any>) {
      if (value && value.length > 0) {
        const f = value.every((item) => item instanceof TableColumnModel)
        if (!f) console.warn('tableCols参数格式不对！必须是Array<TableColumnModel>类型')
        return f
      }
      console.warn('tableCols是必须的')
      return false
    },
  },
  tableData: {
    type: Array,
    default: () => [],
  },
})
const total = computed(() => {
  return props.tableData.length
})
const handleSizeChange = (val: any) => {
  console.log(val)
}
const handleCurrentChange = (val: any) => {
  console.log(val)
}
const btnClick = (scope: any, callback: any) => {
  if (callback && callback instanceof Function) {
    callback(scope)
  }
}
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}
const getRender = (scope: any, render: any) => {
  if (render) {
    if (render instanceof Function) {
      return render(scope)
    } else {
      render
    }
  }
}
</script>
<style>
.table-comp {
  width: 100%;
  height: 100%;
}
</style>
